<template>
	<view>
		<!-- 搜索框 -->
		<view style="margin-top: 20rpx; padding-left:20rpx">
			<u-search :show-action="true" shape="square" actionText="搜索"></u-search>
		</view>
		<!-- 分类列表 -->
		<view class="bigList">
			<!-- 一级分类 -->
			<view class="oneList">
				<view v-for="(item,index) in cateList" :key="item.id" :class='[flag==index? "activeBox":""]'
					@click="selectChange(index)">
					{{item.catename}}
				</view>
			</view>
			<!-- 二级分类 -->
			<view class="twoList">
				<view class="listBox" v-for="item in childrenList" :key="item.id">
					{{item.catename}}
					<view>
						<image :src="baseUrl+item.img" @click="toList(item.pid)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//引入接口地址
	import {
		getCates,
	} from "../../request/app.js"
	export default {
		data() {
			return {
				cateList: [],
				flag: 0,
				childrenList: [],
				baseUrl: baseUrl,
			}
		},
		methods: {
			//列表切换
			selectChange(idx) {
				this.flag = idx
				this.childrenList = this.cateList[idx].children
			},
			//点击跳转到列表页
			toList(pid) {
				uni.navigateTo({
					url: "/pages/list/list?pid=" + pid
				})
			}
		},
		// 页面一加载
		onLoad() {
			//获取一级分类响应
			getCates().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					this.cateList = res.data.list
					this.childrenList = this.cateList[this.flag].children
					console.log(this.childrenList);
				}
			})
		}
	}
</script>

<style>
	.bigList {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		background-color: #f7f7f7;
		padding-bottom: 40rpx;
	}

	.bigList>.oneList {
		width: 30%;
		margin-right: 20rpx;
		height: 100%;
		background-color: #fff;
	}

	.bigList>.oneList>view {
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
	}

	.bigList>.oneList>.activeBox {
		background-color: #FF6900;
		color: #fff;
	}

	.bigList>.twoList {
		width: 70%;
		height: 100%;
	}

	.bigList>.twoList>.listBox {
		width: 100%;
		height: 400rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.bigList>.twoList>.listBox image {
		margin-top: 20rpx;
		width: 200rpx;
		height: 200rpx;
	}
</style>
